<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>离线地图</title>
    <style type="text/css">
        html{height:100%}
        body{height:100%;margin:0px;padding:0px}
        #container{height:100%}
    </style>
    <script type="text/javascript" src="js/apiv2.0.min.js">
    </script>
</head>

<body>
<!--
ak: 1XjLLEhZhQNUzd93EjU5nOGQ
获取模块:
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=poly_ukhgc4
-->
<div id="container"></div>
<script type="text/javascript">

    var outputPath = 'tiles/';    //地图瓦片所在的文件夹
    var fromat = ".png";    //格式

    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;
        var url = outputPath + zoom + '/' + x + '/' + y + fromat;
        return url;
    }
    var tileMapType = new BMap.MapType('tileMapType', tileLayer);

    var map = new BMap.Map("container", { mapType: tileMapType ,minZoom:5,maxZoom:15});

    // 地图级别变化后事件 zoomend
    map.addEventListener('zoomend',function (type, target) {
        console.log(map.getZoom())
        if(map.getZoom()<10){
            map.clearOverlays();
        }else {
            showLine();
        }
    });

    //var map = new BMap.Map("container");          // 创建地图实例
    var point = new BMap.Point(108.94646555063274, 34.34726881662395);  // 创建点坐标
    //map.centerAndZoom(point, 6);                 // 初始化地图，设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 允许缩放
    var bottom_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT});// 左上角，添加比例尺
    var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    map.addControl(bottom_left_control);
    map.addControl(top_right_navigation);

    // 标注-点
/*    var bz_point = new BMap.Point(108.944784,34.25305);
    map.centerAndZoom(bz_point, 15);
    var marker = new BMap.Marker(bz_point,{
        title:'西安市税务局',
        enableClicking:true,
    });        // 创建标注
    var label = new BMap.Label("西安市税务局",{offset:new BMap.Size(20,-10)});
    marker.setLabel(label);
    marker.addEventListener("click", function(type, target){
        console.log(type)
    });
    map.addOverlay(marker);                     // 将标注添加到地图中
    */

    var lines = [
        {"start":{"lng":108.861004,"lat":34.399121},"end":{"lng":108.944784,"lat":34.25305}},
        {"start":{"lng":109.005595,"lat":34.353834},"end":{"lng":108.944784,"lat":34.25305}},
        {"start":{"lng":109.022555,"lat":34.284187},"end":{"lng":108.944784,"lat":34.25305}},
        {"start":{"lng":108.883713,"lat":34.311862},"end":{"lng":108.944784,"lat":34.25305}},
        {"start":{"lng":108.830246,"lat":34.209944},"end":{"lng":108.944784,"lat":34.25305}},
    ];

    function addPolyline(polyline) {
        map.addOverlay(polyline);
    }

    map.centerAndZoom(point, 12);

    function showLine() {
        // 标注-线
        for (let i = 0; i < lines.length; i ++) {
            let polyline = new BMap.Polyline([
                    new BMap.Point(lines[i].start.lng,lines[i].start.lat),
                    new BMap.Point(lines[i].end.lng,lines[i].end.lat)
                ],
                {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5,strokeStyle:'dashed'}
            );
            addPolyline(polyline);
        }

        // 批量打点
        if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
            let points = [];  // 添加海量点数据
            let points_2 = [];  // 添加海量点数据
            for (let i = 0; i < lines.length; i++) {
                points.push(new BMap.Point( lines[i].start.lng, lines[i].start.lat));
                points_2.push(new BMap.Point( lines[i].end.lng, lines[i].end.lat));
            }
            let options = {
                size: BMAP_POINT_SIZE_SMALL,
                shape: BMAP_POINT_SHAPE_CIRCLE, //BMAP_POINT_SHAPE_WATERDROP
                color: '#d340c3'
            }
            let pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
            pointCollection.addEventListener('click', function (e){
                console.log(e);
                alert('起点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
            });
            map.addOverlay(pointCollection);  // 添加Overlay

            let options_2 = {
                size: BMAP_POINT_SIZE_BIG,
                shape: BMAP_POINT_SHAPE_STAR, //BMAP_POINT_SHAPE_WATERDROP
                color: '#d340c3'
            }
            let pointCollection_2 = new BMap.PointCollection(points_2, options_2);  // 初始化PointCollection
            pointCollection_2.addEventListener('click', function (e){
                alert('终点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
            });
            map.addOverlay(pointCollection_2);  // 添加Overlay
        } else {
            alert('请在chrome、safari、IE8+以上浏览器查看本示例');
        }
    }


</script>
</body>
</html>
